const range = 0.5;
const speed = 0.05;
const centerScale = 1;

var g_winReq, g_canvas, g_context, g_circle, g_angle;

function changeCircle()
{
    g_circle.scaleX = centerScale + Math.sin( g_angle ) * range;
    g_circle.scaleY = centerScale + Math.sin( g_angle ) * range;
    g_angle += speed;
}

function drawFrame()
{
    g_winReq( drawFrame, g_canvas );
    g_context.clearRect( 0, 0, g_canvas.width, g_canvas.height );
    changeCircle();
    g_circle.draw( g_context );
}

function onloadHandler()
{
    g_canvas = document.getElementById( 'canvas' );
    g_winReq = winRequestAnimFrame();
    g_context = g_canvas.getContext( '2d' );
    g_circle = new Circle();
    g_angle = 0;

    g_circle.x = g_canvas.width / 2;
    g_circle.y = g_canvas.height / 2;

    drawFrame(); 
}

window.onload = onloadHandler;
    